import {closeDevStandRange, openDevStandRange} from '@/api/standard'
import {CCard} from '@/components/card'
import StandardModalForm from '@/components/form/standardModalForm'
import {DeviceStatusOfStatus, IconImg, ParamIcon} from '@/components/image'
import {CFormModal, ChangeVisible} from '@/components/modal'
import {CnBoldSpan, CnMediumSpan, CnNormalSpan} from '@/components/text'
import {StandardText} from '@/components/text/standard'
import {addressJoin} from '@/libs/toolkit'
import {PropType, defineComponent} from 'vue'

export const StandardCard = defineComponent({
  props: {
    standardData: {
      type: Object as PropType<Standard.StandardData>,
      required: true
    }
  },
  emits: {
    modelFinish: (): boolean => true,
    statusChange: (): boolean => true
  },

  setup(props, {emit}) {
    const state = reactive<{
      standardModalVisible: boolean
      standardList: Standard.StandardData[]
      currentDevStandRange: Standard.DevStandRange | undefined
      currentDevName: string
      spinning: boolean
    }>({
      standardModalVisible: false,
      standardList: [],
      currentDevStandRange: undefined,
      currentDevName: props.standardData.devName,
      spinning: false
    })

    return () => (
      <CCard
        vein={true}
        class='h-368 bg-white relative px-0 pb-52 overflow-hidden'
        title={'标准设置-' + props.standardData.devName}
        v-slots={{
          title: () => (
            <div class='w-full h-full flex justify-between items-center'>
              <div>
                <CnBoldSpan>{props.standardData.devName}</CnBoldSpan>
              </div>
              <DeviceStatusOfStatus status={props.standardData.devStatusCode}>
                <CnBoldSpan class='text-16'>{props.standardData.devStatus}</CnBoldSpan>
              </DeviceStatusOfStatus>
            </div>
          )
        }}
      >
        <div class='px-16'>
          <div class='h-210 mt-13 overflow-y-auto'>
            <table class='h-full table-auto text-left'>
              <tbody>
                {props.standardData.devStandRangeList?.map(item => (
                  <tr class='h-42'>
                    <td class=''>
                      <ParamIcon imgName={item.paramName} class='opacity-30 mr-8'></ParamIcon>
                    </td>
                    <td class='min-w-60'>
                      <CnMediumSpan class='text-xText mr-16'>{item.paramName}</CnMediumSpan>
                    </td>
                    <td>
                      <StandardText
                        standard={item.standRange}
                        paramUnit={item.paramUnit}
                      ></StandardText>
                    </td>
                    <td class='pl-24'>
                      <a-switch
                        v-model={[item.isOpen, 'checked']}
                        checked-children='开'
                        un-checked-children='关'
                        checkedValue={1}
                        unCheckedValue={0}
                        size='small'
                        onChange={(e: any) => {
                          console.log(e)
                          if (e === 0) {
                            closeDevStandRange({devSRId: item.devSRId})
                              .then(() => {
                                emit('statusChange')
                              })
                              .catch(() => {})
                          } else {
                            openDevStandRange({devSRId: item.devSRId})
                              .then(() => {
                                emit('statusChange')
                              })
                              .catch(() => {})
                          }
                        }}
                      ></a-switch>
                    </td>
                    <td class='pl-8'>
                      <IconImg
                        imgName='edit-content'
                        class='w-16 h-16 cursor-pointer transition-all transform hover:scale-110'
                        onClick={() => {
                          state.standardModalVisible = true
                          state.currentDevStandRange = item
                        }}
                      ></IconImg>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>

          <div class='flex justify-end items-center my-16'>
            <CnNormalSpan class='text-5xText mr-16'>
              {addressJoin({
                province: props.standardData.province,
                city: props.standardData.city,
                district: props.standardData.district
              })}
            </CnNormalSpan>
            <CnNormalSpan class='text-xText'>{props.standardData.belongUser}</CnNormalSpan>
          </div>
          <div
            class='w-full h-52 absolute bottom-0 left-0 flex justify-end items-center'
            style={{
              backgroundColor: '#E4EAF5'
            }}
          >
            {/* <CnNormalSpan class='text-primary flex items-center mr-27 cursor-pointer' >
            <IconImg imgName="edit-standard" class='w-24 h-24 mr-12'></IconImg>
          </CnNormalSpan> */}
          </div>
        </div>
        <CFormModal
          class='w-600'
          v-model={[state.standardModalVisible, 'visible']}
          title={`修改合格标准 设备:${state.currentDevName}`}
        >
          {{
            default: (changeVisible: ChangeVisible) => (
              <StandardModalForm
                changeVisible={changeVisible}
                devStandRange={state.currentDevStandRange}
                onFinish={() => emit('modelFinish')}
              ></StandardModalForm>
            )
          }}
        </CFormModal>
      </CCard>
    )
  }
})
